import styled, {css} from "styled-components";
import {Routes, Route} from "react-router-dom";
import Nav from "../../components/nav";
import {routerType} from "../../routers/router";

const Container = styled.div`
  display: flex;
`;
const OverFlowHidden = css`
  overflow: hidden;
`;
const Left = styled.div`
  ${OverFlowHidden}
`;
const Right = styled.div`
  padding: 20px;
  ${OverFlowHidden}
`;

function Menu({router}: {router: routerType[]}) {
  const dom_menu = (router || []).map((item: routerType, index: number) => {
    return item.element ? (
      <Route
        key={index}
        path={item.path}
        element={<item.element></item.element>}
      ></Route>
    ) : null;
  });
  return (
    <>
      {dom_menu.length ? (
        <Container>
          <Left>
            <Nav menu={router}></Nav>
          </Left>
          <Right>
            <Routes>{dom_menu}</Routes>
          </Right>
        </Container>
      ) : null}
    </>
  );
}

export default Menu;
